Vue.component('cart', {
  template: `
    <div>
      <div v-if="cartItems.length === 0">空空如也。</div>
      <div v-else>
        <ul>
          <li v-for="product in cartItems">
            {{product.title}}：￥{{product.price}} x {{product.quantity}} = ￥{{product.price * product.quantity}}
          </li>
        </ul>
        <div>总价为：{{totalPrice}}</div>
      </div>
    </div>
  `,

  props: ['cartItems'],

  watch: {
    cartItems(newValue) {
      // console.log(newValue)
    }
  },

  computed: {
    totalPrice() {
      return this.cartItems.reduce((sum, item) => {
        sum += item.price * item.quantity
        return sum
      }, 0)
    }
  },
})